<template>
  <Header title="调停审批"/>
  <van-cell-group inset style="margin-top:5%;" v-for="(record ,index) in recordList" :key="index">
    <!--头-->
    <van-cell>
      <template #title>
        <van-icon name="manager" color="#9a9b9d" size="5vw"/>
        <span style="margin-left: 15px;">
        <span style="font-size: 4.5vw;color: #4b4c4d"> {{ record.teacherName }} </span>
        <span style="font-size: 3vw;color: #9a9b9d;margin-left: 8px">申请人</span>
        </span>
      </template>
      <template #value>
        <span style="font-size:4vw;height:100%;color:#2b95ef; text-align: end" @click="toInfo(record.id,record.reason)">
         <span> {{ getState(record.state) }}</span>
        <van-icon name="arrow"/>
        </span>
      </template>
    </van-cell>
    <!--body-->
    <van-cell>
      <!--日期-->
      <van-row style="color: #9a9b9d;text-align: center;font-size: 3.5vw;margin-bottom: 3vw">
        <van-col span="5" offset="3" style="text-align: left;">
          申请日期
        </van-col>
        <van-col offset="1" style="text-align: left;color: #6d6d6d;;font-weight:500;">
          {{ record.start }}~{{ record.end }}
        </van-col>
      </van-row>
      <!--类型·-->
      <van-row style="color: #9a9b9d;text-align: center;font-size: 3.5vw;">
        <van-col span="5" offset="3" style="text-align:left;">
          申请类型
        </van-col>
        <van-col span="13" offset="1" style="text-align:left;color: #6d6d6d;">
          {{ getType(record.type) }}
        </van-col>
      </van-row>
    </van-cell>
  </van-cell-group>
  <van-empty v-if="recordList === null" image="search"  description="无待审批" />
  <div class="blank"></div>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router/dist/vue-router";
import {getPendingMsg} from "/@/api/ttsp";
import {Toast} from "vant"

const router = new useRouter()
const route = useRoute()

const recordList = ref([])

const initData = async () => {
  const allApplyRes = await getPendingMsg()
  recordList.value = allApplyRes.response.value.extend.records
  console.log("recordList", recordList.value)
  if(recordList.value === null){
    Toast(`无待审批`);
  }
}

const toInfo = (id, reason) => {
  router.push({path: '/spInfo', query: {id: id, reason: reason}})
}
const getType = (type) => {
  return (type === 1) ? "停课" : "调课";
}
//判断状态
const getState = (state) => {
  let res = "";
  // if (state === 0) {
  res = "审批"
  // } else if (state === 1) {
  //   res = "通过"
  // } else if (state === 3) {
  //   res = "不通过"
  // }
  return res
}
onMounted(() => {
  initData();
})
</script>

<style scoped>
.blank {
  width: 100%;
  height: 5vh;
}
</style>
